<template>
  <div class="page-content">
      <table-bar
        :showTop="false"
        @search="search"
        layout="search, refresh"
        @reset="resetForm(searchFormRef)"
      >
        <template #bottom>
          <el-button @click="showDialog('add')" v-ripple>创建属性</el-button>
        </template>
      </table-bar>
      <VueDraggable v-model="tableData" target="tbody" :animation="150">
        <art-table :data="tableData" show-header-background>
            <el-table-column label="显示名称" prop="title" />
            <el-table-column label="名称" prop="name" />
            <el-table-column label="类型" prop="type" #default="scope">
              {{typeList[scope.row.type]}}
            </el-table-column>
            <el-table-column label="备注" prop="remark" />
            <el-table-column label="是否显示" prop="is_show" #default="scope">
              <el-switch v-model="scope.row.is_show" :active-value="1" :inactive-value="0" @change="handleChange(scope.row,$event)"/>
            </el-table-column>
            <el-table-column label="创建日期" prop="create_time" sortable />
            <el-table-column fixed="right" label="操作" width="150px">
              <template #default="scope">
                <button-table type="edit" @click="showDialog('edit', scope.row)" />
                <button-table type="delete" @click="deleteAttr(scope.row)" />
              </template>
            </el-table-column>
        </art-table>
      </VueDraggable>
      <el-dialog v-model="dialogVisible" :title="dialogType === 'add' ? '添加属性' : '编辑属性'" width="30%">
        <el-form ref="formRef" :model="formData" :rules="rules" label-width="80px">
          <el-form-item label="显示名称" prop="title">
            <el-input v-model="formData.title" />
          </el-form-item>
          <el-form-item label="名称" prop="name">
            <el-input v-model="formData.name" />
          </el-form-item>
          <el-form-item label="显示类型" prop="type">
            <el-select v-model="formData.type">
              <el-option v-for="(item,key) in typeList" :key="item" :label="item" :value="key"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="是否显示" prop="is_show">
            <el-switch v-model="formData.is_show" :active-value="1" :inactive-value="0"/>
          </el-form-item>
          <el-form-item label="排序" prop="sort">
            <el-input type="number" v-model="formData.sort"/>
          </el-form-item>
          <el-form-item label="备注" prop="remark">
            <el-input type="textarea" v-model="formData.remark" :rows="3"/>
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="handleSubmit">提 交</el-button>
          </div>
        </template>
      </el-dialog>
  </div>
</template>

<script setup lang="ts">
  import { ElMessageBox, ElMessage } from 'element-plus'
  import type { FormRules,FormInstance } from 'element-plus'
  import { FieldService } from '@/api/customer/fieldApi'
  import { VueDraggable } from 'vue-draggable-plus'

  const formData = reactive({
    id:'',
    name: '',
    title: '',
    remark: '',
    type: '',
    is_show: 0,
    sort: ''
  })

  const typeList = ref({
    'string':'文本',
    'number':'数字',
    'date':'时间',
  })

  // 分类dialog
  const dialogVisible = ref(false)
  const dialogType = ref('add')

  const tableData = ref()

  const rules = reactive<FormRules>({
    name: [
      { required: true, message: '请输入', trigger: 'blur' },
    ],
    title: [
      { required: true, message: '请输入', trigger: 'blur' },
    ],
    type: [
      { required: true, message: '请选择类型', trigger: 'blur' },
    ],
  })

  getPage()
  // 获取字段列表
  async function getPage() {
    const res = await FieldService.getFieldList()
    tableData.value = res.data
  }

  const searchFormRef = ref<FormInstance>()

  const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
  }

  const showDialog = (type: string, row?: any)=> {
    dialogVisible.value = true
    dialogType.value = type

    if (type === 'edit' && row) {
      formData.id = row.id
      formData.name = row.name
      formData.title = row.title
      formData.type = row.type
      formData.remark = row.remark
      formData.is_show = row.is_show
      formData.sort = row.sort
    } else {
      formData.id = ''
      formData.name = ''
      formData.title = ''
      formData.type = ''
      formData.remark = ''
      formData.is_show = 0
      formData.sort = '1'
    }
  }
  // 显示切换
  const handleChange = async (row:any,e:any)=> {
    row.is_show = e
    await FieldService.fieldUpdate(row)
  }
  // 删除属性
  const deleteAttr = (row:any) => {
    ElMessageBox.confirm('确定要删除该属性吗？', '系统提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'error'
    }).then(async () => {
      await FieldService.fieldDelete({id:row.id})
      await getPage()
      ElMessage.success('删除成功')
    })
  }

  const search = () => {}

  const formRef = ref<FormInstance>()

  const handleSubmit = async () => {
    if (!formRef.value) return
    await formRef.value.validate(async (valid) => {
      if (valid) {
        if (dialogType.value === 'add') {
          await FieldService.fieldCreate(toRaw(formData))
        } else {
          await FieldService.fieldUpdate(toRaw(formData))
        }
        await getPage()
        ElMessage.success(dialogType.value === 'add' ? '添加成功' : '更新成功')
        dialogVisible.value = false
      }
    })
  }
</script>
